<template>
  <div v-if="!!themForm.width && !!themForm.height" class="canvas flex-1">
    <CanvasContainer
      style="height: calc(100vh - 48px)"
      v-model="currentComponent"
      v-model:scale="themForm.scale"
      :data="componentList"
      :width="themForm.width"
      :height="themForm.height"
      :background="themForm.background"
      edit
    >
    </CanvasContainer>
  </div>
</template>

<script setup lang="ts">
import { themForm } from "../../data/form";
import { componentList, currentComponent } from "../data/data";
import CanvasContainer from "./CanvasContainer.vue";
</script>

<style lang="scss" scoped>
.canvas {
  height: 100%;
  width: 100%;
}
</style>
